<template>
  <div class="platform-page">
    <!-- 顶部导航栏 -->
    <header class="top-nav">
      <div class="logo-area">
        <!-- <img src="./assets/logo.png" alt="代练通" class="logo"> -->
        <span class="platform-name">TG电竞</span>
      </div>
      <!-- <nav class="main-nav">
        <a href="#" :class="selectTab == 1 ? 'nav-item active' : 'nav-item'" @click="changeTab(1)">代练订单</a>
        <a href="#" :class="selectTab == 2 ? 'nav-item active' : 'nav-item'" @click="changeTab(2)">陪练订单</a>
      </nav> -->
    </header>
    <div class="display-section">
      <div class="bg-text">
        <div class="small-text">
          做代练 找代练
        </div>
        <div class="big-text">
          <span>就上TG电竞</span>
          <div class="dl-now" @click="scrollToOrderSection">立即代练</div>
        </div>
        <div class="foot-text">

          <div class="label">
            累计服务<span>100万</span>游戏代练师 ，<span>6500万</span>订单
          </div>
        </div>
        <!-- <img src="../assets/images/BG-TEXT.png" alt=""> -->
      </div>
    </div>
    <div class="advantages">
      <div class="advantages-left">
        <div class="title">累计超1亿订单交易</div>
        <div class="advantage-list">
          <div class="advantage-item" v-for="(item, index) in advantageList" :key="index">
            <img :src="item.icon" alt="">
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="advantages-right">
        <img src="../assets/images/DL.jpg" alt="">
      </div>
    </div>
    <div ref="orderSection" style="width: 100%;padding: 0 60px;">
      <!-- 游戏列表 -->
      <div class="game-title">热门游戏</div>
      <div class="game-list">
        <div :class="currentGame == game.name ? 'game-item active' : 'game-item'" v-for="(game, index) in games"
          :key="index" @click="updateCurrentGame(game.name)">
          <img :src="game.icon" :alt="game.name" class="game-icon">
          <span class="game-name">{{ game.name }}</span>
        </div>
      </div>
      <div class="order-amin">
        <!-- <a href="#" :class="selectTab == 1 ? 'nav-item active' : 'nav-item'" @click="changeTab(1)">代练订单</a>
      <a href="#" :class="selectTab == 2 ? 'nav-item active' : 'nav-item'" @click="changeTab(2)">陪练订单</a> -->

        <div class="order-title" v-if="selectTab == 1">代练服务</div>
        <div class="order-title" v-if="selectTab == 2">陪练服务</div>
        <div class="order-tabs">
          <div :class="selectTab == 1 ? 'order-tab order-tab-active' : 'order-tab'" @click="changeTab(1)">代练订单</div>
          <div :class="selectTab == 2 ? 'order-tab order-tab-active' : 'order-tab'" @click="changeTab(2)">陪练订单</div>
        </div>
        <WZDL v-if="currentGame == '王者荣耀' && selectTab == 1"></WZDL>
        <YXLMDL v-if="currentGame == '英雄联盟' && selectTab == 1"></YXLMDL>
        <WWQYDL v-if="currentGame == '无畏契约' && selectTab == 1"></WWQYDL>
        <SJZDL v-if="currentGame == '三角洲行动' && selectTab == 1"></SJZDL>
        <WZPL v-if="currentGame == '王者荣耀' && selectTab == 2"></WZPL>
        <YXLMPL v-if="currentGame == '英雄联盟' && selectTab == 2"></YXLMPL>
        <WWQYPL v-if="currentGame == '无畏契约' && selectTab == 2"></WWQYPL>
        <SJZPL v-if="currentGame == '三角洲行动' && selectTab == 2"></SJZPL>
        <div class="more-game" v-if="currentGame == '更多游戏'">
          <img src="../assets/images/GDYX.jpg"></img>
          <div class="text">客服电话：18888888888</div>
        </div>
      </div>
    </div>
    <!-- 更多游戏弹窗 -->
    <!-- <div class="custom-dialog">
      <el-dialog v-model="modePopup" width="500">
        
      </el-dialog>
    </div> -->

    <!-- 主内容区域 -->
    <!-- <main class="main-content">
      <DLorder v-if="selectTab == 1" :currentGame="currentGame" @update:currentGame="updateCurrentGame"></DLorder>
      <PLorder v-if="selectTab == 2" :currentGame="currentGame" @update:currentGame="updateCurrentGame"></PLorder>
    </main> -->


  </div>
</template>

<script>
// import { ref, onMounted } from 'vue'; // Removed Vue 3 imports
// import DLorder from "./DL/DLorder.vue" // Removed unused import
// import PLorder from "./PL/PLorder.vue" // Removed unused import
//导入游戏表单
import WZDL from '../components/DL/WZDL.vue';
import YXLMDL from '../components/DL/YXLMDL.vue';
import WWQYDL from '../components/DL/WWQYDL.vue';
import SJZDL from '../components/DL/SJZDL.vue';
import WZPL from '../components/PL/WZPL.vue';
import YXLMPL from '../components/PL/YXLMPL.vue';
import WWQYPL from '../components/PL/WWQYPL.vue';
import SJZPL from '../components/PL/SJZPL.vue';
//导入游戏图标
import WZRYicon from '../assets/images/WZRY.jpg';
import YXLMicon from '../assets/images/YXLM.jpg';
import WWQYicon from '../assets/images/WWQY.jpg';
import SJZYicon from '../assets/images/SJZ.jpg';
import GDYXicon from '../assets/images/GDYX.jpg';
//导入优点图标
import ptdb from "../assets/images/ptdb.png"
import dzbp from "../assets/images/dzbp.png"
import jssh from "../assets/images/jssh.png"
import zypl from "../assets/images/zypl.png"

export default {
  name: 'HomePage',
  components: {
    WZDL,
    YXLMDL,
    WWQYDL,
    SJZDL,
    WZPL,
    YXLMPL,
    WWQYPL,
    SJZPL
  },
  data() {
    return {
      selectTab: 1,
      currentGame: "王者荣耀",
      games: [
        { name: '王者荣耀', icon: WZRYicon },
        { name: '英雄联盟', icon: YXLMicon },
        { name: '无畏契约', icon: WWQYicon },
        { name: '三角洲行动', icon: SJZYicon },
        { name: '更多游戏', icon: GDYXicon },
      ],
      advantageList: [
        { icon: ptdb, text: "平台担保" },
        { icon: dzbp, text: "打折包赔" },
        { icon: jssh, text: "急速上号" },
        { icon: zypl, text: "专业陪练" }
      ],
      orderSection: null, // Initialized in data for ref access
      modePopup: false,
    }
  },
  methods: {
    changeTab(tab) {
      this.selectTab = tab;
    },
    updateCurrentGame(newGame) {
      this.currentGame = newGame;
    },
    scrollToOrderSection() {
      // In Vue 2, refs are accessed via this.$refs
      if (this.$refs.orderSection) {
        this.$refs.orderSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  },
  mounted() {
    // Logic from onMounted (if any) would go here
    // Currently empty based on the original code
  }
}

// const games = ref([
//   { name: '王者荣耀', icon: WZRYicon },
//   { name: '英雄联盟', icon: YXLMicon },
//   { name: '无畏契约', icon: WWQYicon },
//   { name: '三角洲行动', icon: SJZYicon },
//   { name: '更多游戏', icon: GDYXicon },
// ]);




// let selectTab = ref(1)
// const changeTab = (tab) => {
//   selectTab.value = tab
// }

// let currentGame = ref("王者荣耀")
// const updateCurrentGame = (newGame) => {
//   currentGame.value = newGame;
// };


// const advantageList = ref([
//   {
//     icon: ptdb,
//     text: "平台担保"
//   },
//   {
//     icon: dzbp,
//     text: "打折包赔"
//   },
//   {
//     icon: jssh,
//     text: "急速上号"
//   },
//   {
//     icon: zypl,
//     text: "专业陪练"
//   }
// ])

// const orderSection = ref(null)
// // 定义滚动方法
// const scrollToOrderSection = () => {
//   if (orderSection.value) {
//     orderSection.value.scrollIntoView({ behavior: 'smooth', block: 'start' });
//   }
// }
</script>

<style scoped>
.more-game {
  width: 100%;
  /* 改为自适应宽度 */
  /* max-width: 500px; */
  /* 最大宽度限制 */
  /* margin: 20px auto; */
  /* 上下边距调整 */
  display: flex;
  flex-direction: column;
  /* 保持纵向排列 */
  align-items: center;
  /* 内容居中 */
  background: #fff;
  border-radius: 12px;
  /* 圆角优化 */
  padding: 30px;
  padding-bottom: 100px;
  /* 增加内边距 */
  /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); */
  /* 添加阴影 */
  animation: fadeIn 0.3s ease;
  /* 添加入场动画 */
}

.more-game img {
  width: 160px;
  /* 固定图片尺寸 */
  height: auto;
  border-radius: 8px;
  /* 图片圆角 */
  object-fit: cover;
  margin-bottom: 20px;
  /* 增加图片与文字间距 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* 图片阴影 */
}

.more-game .text {
  margin-top: 15px;
  font-size: 23px;
  color: #333;
  font-weight: 600;
  line-height: 1.6;
  /* 优化行高 */
  text-align: center;
  /* 文字居中 */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  /* 添加文字阴影 */
}

/* 新增悬停效果 */
.el-dialog__wrapper:hover .more-game {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.custom-dialog :deep(.el-dialog) {
  background-color: transparent;
  box-shadow: none;
  transform: translateY(100px);
}

/* 新增入场动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 优化关闭按钮样式 */
.el-dialog__headerbtn {
  color: #666 !important;
  right: 15px !important;
  top: 15px !important;
}

.el-dialog__headerbtn:hover {
  color: #409EFF !important;
}

.order-amin {
  width: 100%;
  /* padding:24px 32px; */
  box-sizing: border-box;
  /* background: #fff; */
  position: relative;
  /* padding: 0 80px; */
}

.order-amin .order-title {
  width: 100%;
  height: 80px;
  font-size: 20px;
  font-weight: 700;
  padding: 24px 32px;
  background-color: #fff;
}

.order-tabs {
  position: absolute;
  top: 10px;
  right: 100px;
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 20px;
  font-weight: 700;
  box-sizing: border-box;
  background-color: #fff;
}

.order-tabs .order-tab {
  margin-left: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 16px;
  transition: all .3s;
}

.order-tabs .order-tab-active {
  background-color: #398bff;
  color: #fff;
  font-weight: 700;
  padding: 10px;
}

.order-tabs .order-tab:hover {
  cursor: pointer;
  transform: translateY(-3px);
}

/* 游戏列表样式 */
.game-title {
  width: 100%;
  height: 60px;
  font-size: 20px;
  font-weight: 700;
  padding: 24px 32px;
  background-color: #fff;
}

.game-list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 40px;
  padding: 24px 32px;
  background-color: #fff;
}

.game-item {
  width: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 12px;
  padding: 23px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;

}

.game-item:hover {
  cursor: pointer;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.active {
  border: 3px solid #398bff;
}

.game-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: contain;
  margin-bottom: 10px;
}

.game-item img {
  width: 120px;
  height: 120px;
}

.game-name {
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.display-section {
  width: 100%;
  height: 600px;
  background: url("../assets/images/BG.png");
  position: relative;
}

.display-section .bg-text {
  width: 60%;
  height: 50%;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
}

.display-section .bg-text .small-text {
  font-size: 45px;
  color: #fff;
  font-weight: 700;
}

.display-section .bg-text .big-text {
  display: flex;
  align-items: center;
  font-size: 60px;
  color: #fff;
  font-weight: 700;
  margin-top: 20px;
}

.dl-now {
  width: 200px;
  height: 60px;
  background-color: #398bff;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  margin-left: 100px;
  transition: all 0.3s;
}

.dl-now:hover {
  cursor: pointer;
  background-color: #2a7bff;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.display-section .bg-text .foot-text {
  width: 95%;
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  margin-top: 60px;
  background-color: #fdb36335;
  border: 1px solid #fdb263;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skew(-10deg);
  height: 80px;
}

.display-section .bg-text .foot-text .label {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skew(10deg);
}

.display-section .bg-text .foot-text span {
  color: #fdb263;
  margin: 0 10px;
  font-size: 45px;
}

.display-section .bg-text img {
  width: 100%;
  height: 100%;
}

.advantages {
  width: 100%;
  height: 350px;
  background: -webkit-linear-gradient(left, #4c48e4, #7838ee);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  box-sizing: border-box;
}

.advantages .advantages-left {
  display: flex;
  flex-direction: column;
}

.advantages .advantages-left .title {
  width: 700px;
  font-size: 40px;
  color: #fff;
  margin-bottom: 20px;
}

.advantages .advantages-left .advantage-list {
  display: flex;
  align-items: center;
}

.advantages .advantages-left .advantage-list .advantage-item {
  width: 120px;
  background-color: rgba(255, 255, 255, .3);
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  border-radius: 40px;
  padding: 10px;
  font-size: 15px;
  color: #fff;
  box-sizing: border-box;
}

.advantages .advantages-left .advantage-list .advantage-item img {
  width: 25px;
  height: 25px;
  margin-right: 6px;
}

.advantages .advantages-right {
  width: 200px;
  height: 200px;
}

.advantages .advantages-right img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: #f5f5f5;
}

/* 平台页面容器 */
.platform-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

/* 顶部导航栏样式 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: linear-gradient(135deg, #4a9eff, #2a7bff);
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* position: sticky; */
  top: 0;
  z-index: 100;
}

.logo-area {
  display: flex;
  align-items: center;
}

.logo {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.platform-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}

.main-nav {
  display: flex;
}

.nav-item {
  margin: 0 16px;
  text-decoration: none;
  color: white;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.2);
  position: relative;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background-color: white;
  border-radius: 2px;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  width: 100%;
  /* background-color: #fff; */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-nav {
    padding: 12px 16px;
  }

  .logo {
    width: 40px;
    height: 40px;
  }

  .platform-name {
    font-size: 18px;
  }

  .nav-item {
    margin: 0 8px;
    font-size: 14px;
  }


}
</style>